import type { HomeType } from '../../interface'
import styles from './index.module.less'
import classNames from 'classnames'

interface Props {
    className?: string
    itemClass?: string
    style?: React.CSSProperties
    data: Partial<HomeType.GroupData>
}

/** 每一个卡片 */
const Card = (props: { className?: string; label: string; value: number }) => {
    const { label, value } = props

    return (
        <div className={classNames(styles.groupData_item, props.className)} key={label}>
            <label>{label}</label>
            <div>
                <span>{value}</span>
            </div>
        </div>
    )
}

/** 顶部班级数据 */
const GroupData = (props: Props) => {
    const { data } = props

    const groupItems = [
        {
            label: '开班总数',
            value: data.real_total,
        },
        {
            label: '学员总数',
            value: data.student_total,
        },
        {
            label: '合格人数',
            value: data.student_qualified_total,
        },
        {
            label: '合格率',
            value: data.qualified_rate,
        },
    ].filter(({ value }) => value !== undefined) as {
        label: string
        value: number
    }[]

    return (
        <div className={classNames(styles.groupData, props.className)} style={props.style}>
            {groupItems.map(({ label, value }) => {
                return Card({ label, value, className: props.itemClass })
            })}
        </div>
    )
}

export default GroupData
